import { useState, useEffect } from 'react';

// 响应式断点
export const breakpoints = {
  xs: 480,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  '2xl': 1536,
};

// 响应式状态类型
export interface ResponsiveState {
  width: number;
  height: number;
  isMobile: boolean;
  isTablet: boolean;
  isDesktop: boolean;
  isXs: boolean;
  isSm: boolean;
  isMd: boolean;
  isLg: boolean;
  isXl: boolean;
  is2xl: boolean;
}

/**
 * 响应式Hook
 * 提供当前屏幕尺寸和断点信息
 */
export const useResponsive = (): ResponsiveState => {
  const [state, setState] = useState<ResponsiveState>(() => {
    const width = typeof window !== 'undefined' ? window.innerWidth : 1024;
    const height = typeof window !== 'undefined' ? window.innerHeight : 768;
    
    return {
      width,
      height,
      isMobile: width < breakpoints.md,
      isTablet: width >= breakpoints.md && width < breakpoints.lg,
      isDesktop: width >= breakpoints.lg,
      isXs: width < breakpoints.xs,
      isSm: width >= breakpoints.xs && width < breakpoints.sm,
      isMd: width >= breakpoints.sm && width < breakpoints.md,
      isLg: width >= breakpoints.md && width < breakpoints.lg,
      isXl: width >= breakpoints.lg && width < breakpoints.xl,
      is2xl: width >= breakpoints.xl,
    };
  });

  useEffect(() => {
    const handleResize = () => {
      const width = window.innerWidth;
      const height = window.innerHeight;
      
      setState({
        width,
        height,
        isMobile: width < breakpoints.md,
        isTablet: width >= breakpoints.md && width < breakpoints.lg,
        isDesktop: width >= breakpoints.lg,
        isXs: width < breakpoints.xs,
        isSm: width >= breakpoints.xs && width < breakpoints.sm,
        isMd: width >= breakpoints.sm && width < breakpoints.md,
        isLg: width >= breakpoints.md && width < breakpoints.lg,
        isXl: width >= breakpoints.lg && width < breakpoints.xl,
        is2xl: width >= breakpoints.xl,
      });
    };

    // 防抖处理
    let timeoutId: NodeJS.Timeout;
    const debouncedHandleResize = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(handleResize, 150);
    };

    window.addEventListener('resize', debouncedHandleResize);
    return () => {
      window.removeEventListener('resize', debouncedHandleResize);
      clearTimeout(timeoutId);
    };
  }, []);

  return state;
};

/**
 * 获取响应式列数
 * 根据屏幕尺寸返回合适的列数
 */
export const useResponsiveColumns = (config: {
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
  '2xl'?: number;
}) => {
  const { isXs, isSm, isMd, isLg, isXl, is2xl } = useResponsive();
  
  if (is2xl && config['2xl']) return config['2xl'];
  if (isXl && config.xl) return config.xl;
  if (isLg && config.lg) return config.lg;
  if (isMd && config.md) return config.md;
  if (isSm && config.sm) return config.sm;
  if (isXs && config.xs) return config.xs;
  
  // 默认值
  return config.lg || config.md || config.sm || config.xs || 1;
};

/**
 * 获取响应式间距
 * 根据屏幕尺寸返回合适的间距
 */
export const useResponsiveGutter = (config: {
  xs?: number | [number, number];
  sm?: number | [number, number];
  md?: number | [number, number];
  lg?: number | [number, number];
  xl?: number | [number, number];
  '2xl'?: number | [number, number];
}) => {
  const { isXs, isSm, isMd, isLg, isXl, is2xl } = useResponsive();
  
  if (is2xl && config['2xl']) return config['2xl'];
  if (isXl && config.xl) return config.xl;
  if (isLg && config.lg) return config.lg;
  if (isMd && config.md) return config.md;
  if (isSm && config.sm) return config.sm;
  if (isXs && config.xs) return config.xs;
  
  // 默认值
  return config.lg || config.md || config.sm || config.xs || 16;
};

export default useResponsive;